<template>
  <span>
      <el-date-picker 
        v-if="type != ''"
        v-model="value" 
        type="date" 
        placeholder="选择起始日期" 
        value-format="yyyy-MM-dd" 
        @change="handleChange" 
      />

      <el-date-picker
        v-else
        v-model="date"
        :type="rangeType"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期" 
        :format="format"
        :value-format="format"
        :picker-options="pickerOptions"
        @change="handleChange"
      />
  </span>
</template>

<script>
import today from '../../../common/today'
export default {
    props:{
        pickDate:{  // 日期范围
            type: Array,
            default: () => []
        },
        rangeType: {
            type: String,
            default: 'daterange'
        },
        format: {
            type: String,
            default: 'yyyy-MM-dd'
        },
        special: {
            type: Boolean,
            default: false
        },
        pickValue: {    // 单个日期
            type: String,
            default: ''
        },
        type: {
            type: String,
            default: ''
        }
    },
    data(){
        return{
            date: [],
            value: '',
            pickerOptions: {   // 禁选当天之后的日期
                disabledDate(date) {
                    return date.getTime() > Date.now();
                }
            }
        }
    },
    watch:{
        'pickDate'(){   // 监听是否点击日期选择器的x按钮，是，清空日期
            if(this.type == ''){
                let now = today.otherTime(new Date())
                if(this.pickDate[0] == now && this.pickDate[1] == now) {
                    this.date = null;
                }else{
                    if(this.special) this.date = this.pickDate
                }
            }
        },
        'pickValue'(){
            this.value = JSON.parse(JSON.stringify(this.pickValue))
        }
    },
    methods:{
        handleChange(){
            if(this.type == ''){
                if(this.date == null) this.date = []
                this.$emit('handleChange', this.date)
            }else{
                this.$emit('handleChange', this.value)
            }
        }
    }
}
</script>

<style>

</style>